<div class="container">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" id="stationTabs">
        <li class="active"><a data-target="#newStation" data-toggle="tab">New Station</a></li>
        <li><a data-target="#editStation" data-toggle="tab">Edit Station</a></li>
    </ul>
    <ul class="list-inline top30">
        <li class="col-md-1"><img src="assets/images/station.gif" alt="tag" height="100" width="80"/></li>
        <li class="col-md-11">
            <div class="tab-content">
                <div class="tab-pane fade in active" id="newStation">

                    <form ng-submit="handleStationSubmit(station, 'new')" role="form" class="form-horizontal" autocomplete="off" novalidate>
                        <div class="form-group">
                            <label for="newStationName" class="col-md-2 control-label">Station Name:</label>
                            <div class="col-md-3">
                                <input type="text" ng-model="station.name" id="newStationName"
                                       class="form-control" placeholder="Enter station's name"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="newStationX" class="col-md-2 control-label">Station X coordinate:</label>
                            <div class="col-md-2">
                                <input type="number" step="5"  class="form-control" id="newStationX" placeholder="X"
                                       ng-model="station.locationX" min="0" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="newStationY" class="col-md-2 control-label">Station Y coordinate:</label>
                            <div class="col-md-2">
                                <input type="number" step="5"  class="form-control" id="newStationY"
                                       placeholder="Y" ng-model="station.locationY" min="0" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-default" ng-disabled="!( station.name &&
                                station.locationX != null && station.locationY != null )">Save</button>
                            </div>
                        </div>
                    </form>

                </div>
                <div class="tab-pane fade" id="editStation">

                    <form role="form" class="form-horizontal" autocomplete="off" novalidate>
                        <div class="form-group">
                            <label for="stationSelect" class="col-md-2 control-label" ng-click="printStation()">Select a Station:</label>
                            <div class="col-md-2">
                                <select ui-select2 name="stationSelect" id="stationSelect" ng-model="station" class="form-control"
                                        required data-placeholder="Pick a station" ng-change="stationChanged()">
                                    <option value=""></option>
                                    <option ng-repeat="station in stations" value={{station}}>{{station.name}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="stationName" class="col-md-2 control-label">Station Name:</label>
                            <div class="col-md-3">
                                <input type="text" ng-model="editedStation.name" id="stationName"
                                       class="form-control" placeholder="Enter station's name"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="stationX" class="col-md-2 control-label">Station X coordinate:</label>
                            <div class="col-md-2">
                                <input type="number" step="5" class="form-control" id="stationX" placeholder="X"
                                       ng-model="editedStation.locationX" min="0" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="stationY" class="col-md-2 control-label">Station Y coordinate:</label>
                            <div class="col-md-2">
                                <input type="number" step="5"  class="form-control" id="stationY"
                                       placeholder="Y" ng-model="editedStation.locationY" min="0" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-default" ng-disabled="!( editedStation.name &&
                                editedStation.locationX != null && editedStation.locationY != null )"
                                        ng-click="handleStationSubmit(editedStation, 'update')">Save</button>
                                <button type="submit" class="btn btn-danger" ng-disabled="!(editedStation)"
                                        ng-click="deleteStationWithConfirm(editedStation)">Delete</button>
                                        <!--ng-really-message="Are you sure you want to delete this station ({{editedStation.name}})?"-->
                                        <!--ng-really-click="deleteStation(editedStation)">Delete</button>-->
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </li>
    </ul>
    <div cg-busy="submitPromise"></div>

    <div id="confirm" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Delete Station</h4>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete this station ({{editedStation.name}})?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" data-value="0">No</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" data-value="1">Yes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>

